<template>
	<div id="tml">
	<!-- 提交评论 -->
		<div id="title">
			<h3>提交评论</h3>
			<p></p>
			<textarea placeholder="输入评论内容......" v-model = 'postcontent'></textarea>
			<mt-button type="primary" size="large" @click = "postcomment">提交</mt-button>
		</div>
	<!-- 获取评论列表 -->
			<div id="list">
				<h3>评论列表</h3>
				<p></p>
			</div>
			<div v-for = "(item,index) in list">
				<div class="title">
				<span>第{{index+1}}楼:</span>
				<span>用户:{{item.user_name}}</span>
				<span>{{item.add_time | datefmt('YYYY-MM--DD')}}</span>
				</div>
				<ul class="mui-table-view">
					 <li class="mui-table-view-cell">{{item.content}}</li>
		    	     
				</ul>
			</div>
			<!-- 加载跟多 -->
			<mt-button type="danger" size="large" plain @click = "getmore">加载更多</mt-button>
	</div>
</template>
<script>
	export default{
		props:['id'],
		data(){
			return {
				postcontent:'',
				list:[],
				pageindex:1
			}
		},
		created(){
			this.getcomment(this.pageindex);
				
			
		},
		methods:{
// 1.0评论提交
			postcomment(){
				if(this.postcontent.trim().length<=0){
					this.$common.Toast('请输入评论内容');
					return;

				}
				var url = this.$common.apidomain+'/api/postcomment/'+this.id;
				this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
					this.$common.Toast(res.body.message);
	// 4.0将追加的评论置顶
					this.list = [
						{
							"user_name": "匿名用户",
							"add_time": new Date(),
							"content": this.postcontent
							}
						].concat(this.list);
						 // this.list.unshift({
						// 	"user_name": "匿名用户",
						// 	"add_time": new Date(),
						// 	"content": this.postcomment
						// 	})

					this.postcontent = '';

				})
			},
// 2.0评论列表获取
			getcomment(pageindex){
				var url = this.$common.apidomain+'/api/getcomments/'+this.id+'?pageindex='+pageindex;
				this.$http.get(url).then(function(res){
					if(res.body.status!=0){
						this.$common.Toast(res.body.message);
						return;
					}
					this.list =this.list.concat(res.body.message);
					// 另一种方法this.list = this.list.push.apply(this.list,res.bofy.message)
				})
			},
	// 3.0加载更多评论
			getmore(){
				this.pageindex++;
				// 获取分页数据
				this.getcomment(this.pageindex);
			}
								
			
		}
	}
</script>
<style scoped>
	#title,#list{
		padding:5px;
	}
	#title p,#list p{
		border-bottom: 1px solid rgba(0,0,0,.5);
	}

	.title{
	padding: 5px;
	color: #6d6d72;
	font-size: 15px;
	background-color: rgba(0,0,0,0.1);
}
</style>